<!--
 * @Description: 机器人列表
 * @Author: 阳婷
 * @Date: 2021-03-18 10:33:15
 * @LastEditTime: 2022-03-29 14:20:46
 * @LastEditors: 阳婷
-->
<template>
    <div class='box-index'>
        <div class='filter-container'>
            <el-input class="input-width" size="small" placeholder="角色名称" v-model="keyword" clearable @change="getData"></el-input>
            <el-button type="primary" class="filterBtn" size="small" @click="getData">查询</el-button>
        </div>
        <div class="role-content">
            <table-header @click='Eventclick' :hideBtn="hideBtn">
                <el-button type="text" icon="fa fa-plus" @click='addData'> 添加</el-button>
            </table-header>
        </div>
        <el-table border style="width: 100%" :data="tableData" @sort-change='getsort'
            @selection-change="handleSelectionChange" ref="tables" highlight-current-row @row-click="rowclick" :row-key="getRowKeys">
            <el-table-column type="selection" :reserve-selection=true></el-table-column>
            <el-table-column prop="name" label="角色名称"></el-table-column>
            <el-table-column prop="display_name" label="角色描述" show-overflow-tooltip></el-table-column>
            <el-table-column fixed="right" label="操作" width="280">
                <template #default="scope">
                    <el-button type="text" @click="rowclick(scope.row,1)" size="small">详情</el-button>
                    <el-button type="text" size="small" @click="rowclick(scope.row,2)">账号配置</el-button>
                    <el-button type="text" size="small" @click="rowclick(scope.row,3)">页面权限</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @current-change="handleCurrentChange" :page-size='perPage' :current-page="current"
                :total="pagetotal" layout="total, prev, pager, next, jumper">
            </el-pagination>
            <asides v-if="show" v-model:show="show" v-model:header="header" v-model:Icon='icon' v-model:width="width">
                <side-info v-model:row-data="rowData" v-model:table-data="tableData" v-model:status="status" v-model:active-type="activeType">
                </side-info>
            </asides>
        </div>
    </div>
</template>
<script>
    import TableHeader from "./../../components/TableHeader/index.vue"
    import Asides from "@/components/Asides"
    import sideInfo from './sideInfo.vue'
    export default {
        data() {
            return {
                hideBtn: {
                    Enable: false,
                    Disable: false,
                    delete: true
                },
                status: 1,//1：详情 0：添加
                pagetotal: 0, //总条数
                page: 1, //当前页
                perPage: 15, //每页多少条
                current: 1,
                sort: '',
                keyword: '',
                tableData: [],
                chooseGroup: [],
                is_overtime: "",
                rowData: {},
                header: "",
                show: false,
                icon: "el-icon-menu",
                width: "760px",
                activeType:"first"
            }
        },
        components: {
            TableHeader,
            Asides,
            sideInfo
        },
        mounted() {
            this.getData(1)
        },
        methods: {
             getRowKeys(row){
return row.id
            },
            getData(val) {
                this.show?this.show=false:""
                if (val == 1) {
                    this.chooseGroup = []
                    this.$refs.tables.clearSelection();
                    this.page = 1
                }
                this.$ajax('get', '/api/roles', {
                    keyword:this.keyword,
                     page: this.page,
                     perPage:this.perPage,
                    sort: this.sort
                }, (data) => {
                    this.tableData = data.data.data
                    this.current = data.data.pageNum
                    this.perPage = parseFloat(data.data.pageSize)
                    this.pagetotal = data.data.total
                })
            },
            getDetail(id){
                
                this.$ajax('get', '/api/roles/'+id, {
                }, (data) => {
                    this.rowData = data.data
                })
            },
            Eventclick(val) {
                if (val == "删除") {
                    this.deletes()
                }
            },
            rowclick(val, e) {
                if (e && e.no == 4) {

                } else {
                    if (e == 2) {
                        this.activeType = "second"
                    } else if (e == 3) {
                        this.activeType = "third"
                    } else {
                        this.activeType = "first"
                    }
                    this.status = 1
                    this.show = true
                    this.header = val.name
                    this.getDetail(val.id)
                }
            },
            addData() {
                this.status = 0
                this.show = true
                this.rowData = {}
                this.header = "添加"
            },
            deletes() {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.$ajax(
                            "delete", "/api/roles", {
                            id: this.chooseGroup
                        },
                            data => {
                                this.$message({
                                    type: "success",
                                    message: data.msg
                                });
                                this.$refs.tables.clearSelection();
                                this.chooseGroup = []
                                this.getData()
                            }
                        );
                    })
                    .catch(() => {
                        this.$message({
                            type: "success",
                            message: "已取消删除"
                        })
                    })
            },
            getsort(val) {
                if (val && val.order == 'ascending') {
                    this.sort = val.prop
                } else if (val && val.order == 'descending') {
                    this.sort = '-' + val.prop
                }
            },
            handleSelectionChange(val) {
                this.chooseGroup = []
                val.forEach(el => {
                    this.chooseGroup.push(el.id)
                })
            },
            handleCurrentChange(val) {
                this.page = val
                this.getData()
            }
        }
    }
</script>